<template>
  <main-card title="AI应用" :tabs="getTabs()" :loading="loading">
    <template #screen-space>
      <div class="h-48">
        <a-row class="page-top" :wrap="false" align="middle" justify="space-between">
          <a-col>
            <a-select
              ref="tagSelectRef"
              v-model:value="pageForm.status"
              :style="{ width: '132px' }"
              :filter-option="false"
              @change="getDataList({ offset: 1 })"
            >
              <a-select-option v-for="option in Audit_STATUS_TEXT_MAP" :key="option.value" :value="option.value">{{
                option.text
              }}</a-select-option></a-select
            ></a-col
          >
          <a-col>
            <a-input
              v-model:value="pageForm.name"
              v-trim
              allow-clear
              placeholder="请输入名称"
              style="width: 328px"
              @press-enter="getDataList({ offset: 1 })"
            >
              <template #prefix> <i class="iconfont icon-search-line" @click="getDataList()"></i> </template>
            </a-input>
          </a-col>
        </a-row>
      </div>
    </template>
    <div class="page-table">
      <a-table
        :columns="tableColumns"
        :data-source="dataList"
        :pagination="false"
        :style="{ width: '100%' }"
        :custom-row="r => ({ onClick: () => handleToDetail(r) })"
        @change="tableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'name'">
            {{ record.name }}
          </template>

          <template v-else-if="column.dataIndex === 'content'">
            <div :title="record.content || '/'" class="ellipsis">{{ record.content || '/' }}</div>
          </template>
          <template v-else-if="column.dataIndex === 'status'">
            <div v-if="record.status === '驳回'" class="reject">
              <div class="circular"></div>
              {{ record.status }}
            </div>
            <div v-else>{{ record.status }}</div>
          </template>
          <template v-else>
            <span> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </span>
          </template>
        </template></a-table
      >
    </div>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card>
</template>

<script setup lang="ts">
  import { TableColumnsType, TableProps } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import duration from 'dayjs/plugin/duration'
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import useList from '@/hooks/use-list'
  import { auditListApi } from '@/services/api'
  import { replaceEmptyStr } from '@/utils'
  import { filterTableColumns } from '@/utils'

  import { getTabs } from '../../utils'
  import { Audit_STATUS_TEXT_MAP, TableColumnIndex, TableColumnTitle } from '../constant'
  import { PageFormType, ReviewItem, TableDataType } from '../types/index'
  dayjs.extend(duration)
  const router = useRouter()

  // const crumbs = [{ name: '审核记录' }]

  onMounted(() => {
    getDataList()
    console.log('pageForm', pageForm.value)
  })

  // 表格
  const tableColumns = ref<TableColumnsType>(
    filterTableColumns([
      {
        title: TableColumnTitle['Name'],
        dataIndex: TableColumnIndex['Name'],
        width: 180
      },
      {
        title: TableColumnTitle['Content'],
        dataIndex: TableColumnIndex['Content']
      },

      {
        title: TableColumnTitle['Status'],
        dataIndex: TableColumnIndex['Status'],
        width: 180
      },
      {
        title: TableColumnTitle['CreateTime'],
        dataIndex: TableColumnIndex['CreateTime'],
        isSort: true,
        width: 180
      }
    ])
  )

  const { pageForm, dataList, loading, getDataList } = useList<PageFormType, ReviewItem>(auditListApi.list, {
    name: '',
    status: '',
    order: 'desc',
    columns: 'createTime'
  })

  // 表格变化
  const tableChange: TableProps<TableDataType>['onChange'] = (_pagination, filters: any, sorter: any) => {
    pageForm.value.status = filters.status?.length ? filters.status[0] : ''
    pageForm.value.columns = sorter.field === 'updateTime' ? 'updateTime' : 'createTime'
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'
    getDataList({ offset: 1 })
  }

  // 跳转到详情
  const handleToDetail = (item: ReviewItem) => {
    router.push({
      path: `/ai-app/check-log/detail/${item.id}`
    })
  }
</script>

<style lang="less" scoped>
  .page-top {
    padding: 0;
    box-sizing: border-box;

    .pageTop-active {
      color: rgba(29, 32, 132, 1);
      background-color: transparent;
      border: none !important;
      box-shadow: none;
    }

    & > .ant-col {
      display: flex;
      align-items: center;
    }

    .ant-col + .ant-col {
      margin-left: 16px;
    }
  }

  .reject {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

    .circular {
      width: 6px;
      height: 6px;
      background: #e44833;
      border-radius: 50%;
    }
  }

  .ellipsis {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
